<!--
 * @Author: 梁清福
 * @Date: 2021-07-10 08:19:12
 * @LastEditTime: 2021-07-13 17:30:05
 * @LastEditors: 梁清福
 * @Description: 行学天下首页
 * @FilePath: \lianxi\day2\xxtx-ui\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>行学天下首页</title>
</head>
<body>
    <div id="app">
        <div class="header">
            <div class="headLeft"> 
                 <div class="logo" >
                行学天下
                 </div>
            <div class="title">行学天下</div>
            </div>
            <div class="headRight">
                <div class="callMe">
                   <a href="#callMe"><img src="image/callMe.png" alt="图片丢失了">致电我们</a> 
                </div>
            </div>
        </div>

        <!-- 自己写的轮播图 -->
   <!-- <div class="lunBoTu">
    <div class="lunBoTuImg">
      <ul>
        <li class="item" style="display: block;">
          <img src="image/picture1.jpg" alt="图片丢失">
        </li>
        <li class="item">
          <img src="image/picture2.jpg" alt="图片丢失">
        </li>
        <li class="item">
          <img src="image/picture3.jpg" alt="图片丢失">
        </li>
      </ul>
    </div>
    <div class="lnBtn">
      <div class="lastBtn">
        <img src="image/last.png" alt="图片丢失">
      </div>
      <div class="nextBtn">
        <img src="image/next.png" alt="图片丢失">
      </div>
    </div>
    <div class="smallBtn">
      <ul>
        <li class="btn active"></li>
        <li class="btn"></li>
        <li class="btn"></li>
      </ul>
    </div>
  </div> -->
 
        <!-- 引入组件库的轮播图 -->
        <template>
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in carousel" :key="item.id">
              <img :src="item.url" alt="">
            </el-carousel-item>
          </el-carousel>
        </template>
   

        <!-- 精选游学项目 -->
        <div class="youXue">
          <div class="myH2">
            精选游学项目
          </div>
          <!-- {{project}} -->
          <div class="myUl" v-for="item in project" @click="toDetails(item.id)">
            <img v-if="!item.figure" src="image/img1.jpg" alt="">
            <img v-else :src="item.figure" alt="">
            <div class="title">{{item.name}}</div>
            <div class="date">{{ formatDate(item.beginTime) }} ~ {{formatDate(item.endTime)}}</div>
            <div class="city">{{item.region}}</div>
            <div class="desc">{{item.introduce}}</div>
          </div>
        </div>

        <!-- 学生风采 -->
        <div class="fengCai">
        <div class="myH2">
          学生风采
        </div>
        <div class="myFengCaiDiv">
          <!-- {{article}} -->
          <div class="myFengCai" v-for="item in article">
            <el-empty v-if="!item.cover" description="暂无数据" class="kongtu"></el-empty>
            <img v-else :src="item.cover" alt=""   @click="toDetail(item.id)">
            <div class="title"  @click="toDetail(item.id)">{{item.title.length < 22?item.title:item.title.slice(0,22)+'...'}}</div>
            <div class="date"  @click="toDetail(item.id)">{{formatDate(item.publishTime)}}</div>
            <div class="name"  @click="toDetail(item.id)">{{item.baseUser.realname}}</div>
            <div class="like"><i class="el-icon-star-off"></i>{{item.thumpUp}}</div>
            <div class="likeBtn">
            <el-button type="warning" icon="el-icon-star-off" circle @click="thumbUp(item.id)"></el-button>
            </div>
            </div>
          </div>
        </div>
          <!--返回顶部-->
          <el-backtop :bottom="200"></el-backtop>
        </div>        
         

        <!-- 常建问题 -->
        <div class="wenTi">
            <div class="myH2">
              常建问题
            </div>
            <div class="myWenTi">
              <div class="title">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？
              </div>
              <div class="desc">
                其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。
              </div>
              <img src="image/0AE878B1-15F4-4AD9-A6FE-ED10AE7A3CA7.png" alt="">
            </div>
            <div class="myWenTi">
              <div class="title">参加夏令营到底有什么好处？
              </div>
              <div class="desc">
                国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。
              </div>
              <img src="image/0AE878B1-15F4-4AD9-A6FE-ED10AE7A3CA7.png" alt="">
            </div>
        </div>
  
        <!-- 底部 -->
        <div class="footer">
            <div id="callMe" class="callMe">
              联系我们（工作时间：9:00-17:00）
              121-02542542
              <a href="https://briup.cn">https://briup.cn</a>
                <!--通过qq实现在线客服功能-->
                <a target="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=1439370928&Site=se6%9d%%b0%e6%99%ae&Menu=yes">在线客服</a>
            </div>

            <div class="beiAn">
              <a href="http://beian.miit.gov.cn">京ICP备XXXXXXX号</a>
              <a href="http://wwwwi.beian.gov.cn/portal/registerSystemInfo">公安备案号00000000</a>
            </div>
              <div class="callMe">
              ©1907-2021山西农业大学
            </div>
        </div>
      
        </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- <script>
  var index = 0;
  var timer;
  // 通过定时器切换图片
  function myTimer() {
    timer = setInterval(
      function () {
        index++;
        if (index > 2) {
          index = 0
        }
        $('.item').eq(index).show().siblings().hide();
        // 改变小圆点样式
        $('.btn').eq(index).addClass('active').siblings().removeClass('active');
      }, 3000
    )
  }
  this.myTimer();
  var that = this;
  // 通过左右键切换图片
  $('.nextBtn').click(function () {
    index++;
    if (index > 2) {
      index = 0;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  $('.lastBtn').click(function () {
    index--;
    if (index < 0) {
      index = 2;
    }
    $('.item').eq(index).show().siblings().hide();
    // 改变小圆点样式
    $('.btn').eq(index).addClass('active').siblings().removeClass('active');
    // 重置计时器
    clearInterval(timer);
    that.myTimer();
  });
  // 点击小圆点切换图片
  $('.btn').click(function () {
    // 获取用户点击的列表元素下标
    index = $(this).index();
    // 切换图片
    $('.item').eq(index).show().siblings().hide();
    // 给小圆点添加样式
    $(this).addClass('active').siblings().removeClass('active')
    // 重置定时器
    clearInterval(timer);
    that.myTimer();
  })
</script> -->



<!-- 请求数据 -->
<script>
  new Vue({
    el:'#app',
    data:{
      project:[],
      article:[],
      carousel:[],
    },
    created(){
      this.findProject();
      this.findArticle();
      this. findLun();
    },
    methods:{
  // 查询游学项目
   findProject(){
    axios.get('http://47.94.46.113:8888/index/project/pageQuery?page=1&pageSize=10&status=审核通过').then((res)=>{
     this.project=res.data.data.list
    })
  },
    // 将时间戳格式化
    formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
  // 学生风采
   findArticle(){
    axios.get('http://47.94.46.113:8888/index/article/pageQuery?page=1&pageSize=10&status=审核通过').then((res)=>{
     this.article=res.data.data.list
    })},
    //轮播图
    findLun(){
    axios.get('http://47.94.46.113:8888/index/carousel/findAll').then((res)=>{
     this.carousel=res.data.data
    })},
    // 跳转到游学项目详情页面
    toDetails(id){
      window.location.href="details.html?id="+id;
    },
    toDetail(id){
      window.location.href="detail.html?id="+id;
    },
    //学生风采点赞
    thumbUp(id){
  axios.get('http://47.94.46.113:8888/index/article/thumbUp?id=' + id).then((res)=>{
    console.log(res);
    //刷新点赞数
      this.findArticle();
      this. $message({
        message:res.data.message,
        type: 'success'  });
  })
    }}
  })
</script>
</html>